CSS - 继承和层叠

发表于   |   分类于   |  

HTML 中，标签的层级关系就是树，<html> 是根节点。CSS 继承是指从父元素那继承部分 CSS 属性。

应该类似父类和子类的关系吧，只不过这个类只用来描述 View 的 UI 元素。

比如下面的代码：

1
2
3
4
5
6
<style type="text/css">
    p {
        color: red;
    }
</style>
<p>CSS <span>继承</span></p>

我们没有描述 <span> 的样式，继承 两个字也变成红色，用面向对象来理解，应该是这样的：

1
2
3
4
5
6
7
8
class P {
	color = red
}
class Span: P {
}
let span = Span()
print(span.color)

CSS 的继承关系是比较弱的，子元素不一定会继承父元素所有的属性。

CSS 层叠可以定义多个样式，不冲突时，多个样式可以层叠为一个，冲突时，按照不同样式规则优先级来应用样式。

CSS 层叠类似子类重写和添加属性吧。CSS 的继承和层叠和面向对象的继承和多态感觉差不多。

CSS 权值

类型 权值
行内样式 1000
id 选择器 100
class 选择器和伪类 10
标签选择器 1
通配符选择器 0
继承 无权值，有任意声明都会被覆盖。

权值计算

以 #main div.warning h2 {...} 举例：

类型 符名 权重
id #main 100
标签 div 1
class warning 10
标签 h2 1

因此它的权值是 112。

比较原则

1,0,0,0 > 0,99,99,99，也就是说从左往右逐个等级比较，前一等级相等才往后比，无论是行间、内部和外部样式，都是按照这个规则来进行比较。而不是直观的 行间 > 内部 > 外部样式，id > class > 元素。之所以有这样的错觉，是因为确实行间为第一等的权重，所以它的权重是最高的，而内部样式可能一般写在了外部样式引用了之后，所以覆盖掉了之前的。

同样权值的样式，后声明的样式会覆盖先声明的样式。

调整优先级

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
      * {
        color: red !important
      }
    </style>
  </head>
  <body>
    <p style="color:blue">hello world</p>
  </body>
</html>

!importrtant 关键字可以使样式的权重提升到无限大，通过 !important 声明的样式，会覆盖所有冲突样式。

CSS 优先级

之前我们学习过，CSS 的优先级 行内样式 > 内部样式 > 外部样式 ，其中 <link> 和 @import 的优先级取决于位置的先后，最后定义的优先级最高，也就是就近原则。

那么元素选择器、class 选择器、id 选择器、全局选择器，群组选择器、后代选择器，这几种选择器的优先级又是怎样的呢？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS 选择器优先级</title>
    <style media="screen" type="text/css">
      div {
        color: red;
      }
      #green {
        color: green;
      }
      .blue {
        color: blue;
      }
    </style>
  </head>
  <body>
    <p>单独使用</p>
    <div class="">
      使用标签选择器
    </div>
    <div class="" id="green">
      使用 id 样式
    </div>
    <div class="blue">
      使用 class 样式
    </div>
    <div class="blue" id="green">
      同时引用 class 和 id
    </div>
    <!--id选择器 > 标签选择器-->
    <!--class选择器 > 标签选择器-->
    <!--id选择器 > class选择器-->
  </body>
</html>

通过上面的代码，我们可以得出结论：

1
id选择器 > class选择器 > 标签选择器

我们之前学习过，id 和 HTML 元素是一一对应的，但多个元素可以使用一个 class，一个元素也可以使用多个 class，因此 id 距离元素“更近”。

一个元素同时继承多个 class 发生冲突时，后定义的 class 会覆盖之前的 class。